<template>
  <div class="all-rel">
    <div class="all-flex-center-between all-top-handle">
      <el-button size="small" @click="clearFilter">重置所有筛选</el-button>
      <router-link to="/image/add"><span class="all-add-btn el-icon-plus"></span></router-link>
    </div>
    <div class="all-flow-table-box">
      <el-table ref="myTable" :data="list" border stripe>
        <el-table-column align="center" sortable prop="bannerID" label="用户id" width="100"></el-table-column>
        <el-table-column align="center" prop="title" label="标题" width="180"></el-table-column>
        <el-table-column align="center" prop="thumb" label="图片地址" width="100">
          <template slot-scope="scope">
            <div class="img-box" :style="'background-image:url(' + scope.row.thumb + ')'"></div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="状态" width="80"
          :filters="[{text: '启用', value: 1}, {text: '禁用', value: 0}]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">
            <span>{{scope.row.statusText}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="link" label="链接" width="180"></el-table-column>
        <el-table-column align="center" prop="type" label="类型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 1">banner</span>
            <span v-if="scope.row.type === 2">广告</span>
            <span v-if="scope.row.type === 3">分享海报</span>
          </template>
        </el-table-column>
        <el-table-column></el-table-column>
        <el-table-column align="center" label="操作" width="210">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleStatus(scope.row)">{{scope.row.status == 1 ? "禁用" : "启用"}}</el-button>
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="all-pagination">
      <el-pagination background layout="prev, pager, next" :page-size="size" :total="count" @current-change="currentPage"></el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      count: 0,
      size: 5,
      list: []
    };
  },
  created(){
    this.getList(1);
  },
  methods: {
    clearFilter() {
      this.$refs.myTable.clearFilter();
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] == value
    },
    getList(page, size) {
      let _this = this;
      this.$ajax({
        url:'banner/getlist',
        data:{
          app:{
            page: page,
            size: size === undefined ? this.size : size,
          }
        },
        perfect(con) {
          _this.list = con.list;
          _this.count = con.count;
        },
        success(res) {
          if (res.data.code !== 1) {
            _this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }
      });
    },
    handleStatus(row){
      let _this = this;
      this.$ajax({
        url:'banner/setStatus',
        data: {
          app: {
            bannerID: row.bannerID,
            status: row.status == 1 ? 0 : 1
          }
        },
        perfect(con, res) {
          _this.$message({
            message: res.data.msg,
            type: 'success',
            onClose() {
              _this.$router.go(0);
            }
          });
        }
      });
    },
    handleEdit(row) {
      window.sessionStorage.imageData = JSON.stringify(row);
      this.$router.push("/image/edit");
    },
    handleDelete(index, row) {
      let _this = this;
      this.$confirm("您确定要删除么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        _this.$ajax({
          url:'banner/delBanner',
          data: {
            app: {
              bannerIDS: [row.bannerID]
            }
          },
          success(res) {
            if (res.data.code === 1) {
              _this.$message({
                message: res.data.msg,
                type: 'success',
                onClose(){
                  _this.$router.go(0);
                }
              });
            } else {
              _this.$message({
                message: res.data.msg,
                type: 'warning'
              });
            }
          }
        });
      }).catch(() => {});
    },
    currentPage(page) {
      this.getList(page);
    }
  }
};
</script>
<style scoped>
.img-box {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
